<template>
  <div class="container">
    <a-card :bordered="false">
      <a-form :model="form">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-form-item field="taskName" label="任务" label-col-flex="100px">
              <a-input
                v-model="queryParam.taskName"
                placeholder="请输入任务名称"
              />
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item
              field="nodeName"
              label="节点名称"
              label-col-flex="80px"
            >
              <a-input
                v-model="queryParam.nodeName"
                placeholder="请输入节点名称"
              />
            </a-form-item>
          </a-col>
          <span
            style="float: right; overflow: hidden"
            class="table-page-search-submitButtons"
          >
            <a-col :span="8">
              <a-button type="primary" icon="search" @click="searchQuery"
                >查询</a-button
              >
              <a-button
                type="primary"
                icon="reload"
                style="margin-left: 8px"
                @click="searchReset"
              >
                重置
              </a-button>
              <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a> -->
            </a-col>
          </span>
        </a-row>
      </a-form>
      <div>
        <a-spin :loading="loading" tip="This may take a while...">
          <a-table
            :pagination="ipagination"
            :data="taskListDatasource"
            :columns="taskListColumn"
            page-position="bottom"
            @change="handleTableChange"
            @page-change="handlePageChange"
            @page-size-change="handlePageSizeChange"
          >
            <template #order="{ record, column, rowIndex }">
              {{ rowIndex + 1 }}
            </template>
            <template #status="{ record, column, rowIndex }">
              <div v-if="record.status === '待完成'">
                <span
                  style="
                    display: inline-block;
                    width: 9px;
                    height: 9px;
                    border-radius: 50%;
                    background: #ff5148;
                    margin-right: 8px;
                  "
                ></span>
                <span style="color: #ff5148">{{ record.status }}</span>
              </div>
              <div v-else-if="record.status === '进行中'">
                <span
                  style="
                    display: inline-block;
                    width: 9px;
                    height: 9px;
                    border-radius: 50%;
                    background: #32d26d;
                    margin-right: 8px;
                  "
                ></span>
                <span style="color: #32d26d">{{ record.status }}</span>
              </div>
              <div v-if="record.status === '已完成'">
                <span
                  style="
                    display: inline-block;
                    width: 9px;
                    height: 9px;
                    border-radius: 50%;
                    background: #309cfa;
                    margin-right: 8px;
                  "
                ></span>
                <span style="color: #309cfa">{{ record.status }}</span>
              </div>
            </template>
            <template #warnLevel="{ record, column, rowIndex }">
              <a-tag v-if="record.warnLevel == '特急'" color="red">{{
                record.warnLevel
              }}</a-tag>
              <a-tag v-else-if="record.warnLevel == '紧急'" color="green">
                {{ record.warnLevel }}
              </a-tag>
              <a-tag v-else-if="record.warnLevel == '普通'" color="blue">
                {{ record.warnLevel }}
              </a-tag>
            </template>
            <template #action="{ record, column, rowIndex }">
              <span style="color: #3681ff" @click="handleWork(record)"
                >办理</span
              >
              <a-divider direction="vertical"></a-divider>
              <span style="color: #3681ff" @click="handleShow(record)"
                >查看</span
              >
            </template>
          </a-table>
        </a-spin>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";

const form = reactive({
  taskName: "",
  nodeName: "",
});
const queryParam = ref({
  taskName: "",
  nodeName: "",
});
const loading = ref(false);
const ipagination = reactive({
  current: 1,
  pageSize: 10,
  pageSizeOptions: [10, 30, 50, 100, 500],
  showTotal: true,
  showJumper: true,
  showPageSize: true,
  total: 0,
});
const isorter = {
  column: "",
  order: "",
};
const taskListDatasource = ref([]);
const taskListColumn = [
  {
    title: "序号",
    dataIndex: "",
    key: "rowIndex",
    width: 100,
    align: "center",
    slotName: "order",
  },
  {
    title: "任务名称",
    dataIndex: "taskName",
    align: "center",
    sortable: {
      sorter: true,
      sortDirections: ["ascend", "descend"],
    },
  },
  {
    title: "截止时间",
    dataIndex: "finishTime",
    align: "center",
    sortable: {
      sorter: true,
      sortDirections: ["ascend", "descend"],
    },
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    align: "center",
  },
  {
    title: "类型",
    dataIndex: "type",
    align: "center",
  },
  {
    title: "状态",
    dataIndex: "status",
    align: "center",
    slotName: "status",
  },
  {
    title: "紧急程度",
    dataIndex: "warnLevel",
    align: "center",
    slotName: "warnLevel",
  },
  {
    title: "操作",
    dataIndex: "action",
    align: "center",
    slotName: "action",
  },
];
const searchQuery = () => {
  // console.log("进行搜索");
  // console.log(queryParam, "queryParam");
  taskListDatasource.value = reactive([
    {
      taskName: "中国青少年发展基金项目北京出差",
      finishTime: "2025-08-25",
      createTime: "2025-08-25",
      type: "课程",
      status: "待完成",
      warnLevel: "特急",
    },
    {
      taskName: "中国青少年发展基金项目北京出差",
      finishTime: "2025-08-25",
      createTime: "2025-08-25",
      type: "课程",
      status: "进行中",
      warnLevel: "紧急",
    },
    {
      taskName: "中国青少年发展基金项目北京出差",
      finishTime: "2025-08-25",
      createTime: "2025-08-25",
      type: "课程",
      status: "已完成",
      warnLevel: "普通",
    },
    {
      taskName: "中国青少年发展基金项目北京出差",
      finishTime: "2025-08-25",
      createTime: "2025-08-25",
      type: "课程",
      status: "待完成",
      warnLevel: "特急",
    },
    {
      taskName: "中国青少年发展基金项目北京出差",
      finishTime: "2025-08-25",
      createTime: "2025-08-25",
      type: "课程",
      status: "待完成",
      warnLevel: "特急",
    },
    {
      taskName: "中国青少年发展基金项目北京出差",
      finishTime: "2025-08-25",
      createTime: "2025-08-25",
      type: "课程",
      status: "待完成",
      warnLevel: "特急",
    },
  ]);

  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 1000);
  ipagination.total = 12;
};
// 表格发生变化
const handleTableChange = (data, extra, currentData) => {
  if (extra.sorter && Object.keys(extra.sorter).length > 0) {
    isorter.column = extra.sorter.field;
    isorter.order = extra.sorter.direction;
  }
  ipagination.current = extra.page;
  ipagination.pageSize = extra.pageSize;
  searchQuery();
  console.log(data, extra, currentData, "表格发生变化的数据");
};
const handlePageSizeChange = (pageSize) => {
  ipagination.pageSize = pageSize;
  console.log(pageSize, "pageSize");
};
const handlePageChange = (page) => {
  ipagination.current = page;
};
// 点击处理按钮
const handleWork = (record) => {
  console.log(record, "处理拿到的record");
};
// 点击查看按钮
const handleShow = (record) => {
  console.log(record, "查看拿到的record");
};
const searchReset = () => {
  // console.log("重置搜索");
  queryParam.value = {};
};
onMounted(() => {
  searchQuery();
});
</script>

<style lang="less">
.container {
  padding: 0 20px 20px;
}
.table-page-search-submitButtons {
  display: block;
  margin-bottom: 24px;
  white-space: nowrap;
}
.arco-spin {
  width: 100%;
}
</style>
